<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="/static/tailwind.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">

    <nav class="bg-blue-500 p-4">
        <div class="container mx-auto">
            <a href="/" class="text-white text-lg font-semibold">宠物在线领养</a>
        </div>
    </nav>

    <div class="container mx-auto mt-8">
        <h1 class="text-2xl font-bold mb-4">{{ title }}</h1>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% for pet in pets %}
            <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                <img src="{{ pet.Image }}" alt="{{ pet.Name }}" class="w-full h-48 object-cover rounded mb-4">
                <h2 class="text-xl font-bold mb-2">{{ pet.Name }}</h2>
                <p class="text-gray-700 mb-2">{{ pet.Description }}</p>
                <a href="/adopt/{{ pet.Id }}" class="text-blue-500 hover:underline">领养</a>
            </div>
            {% endfor %}
        </div>
    </div>

    <footer class="bg-blue-500 p-4 mt-8">
        <div class="container mx-auto">
            <p class="text-white text-center">&copy; 2024 宠物在线领养. 版权所有.</p>
        </div>
    </footer>
</body>
</html>
